<template>
  <div>

    <div style="height: 70px; width: 100%; background-color: #52c7c6; ">

      <div style="height: 70px; width: 200px; display: inline-block;">
        <br />
        <h3>&nbsp;&nbsp;&nbsp;收入概况:</h3>
        <br />

      </div>


      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ shootingnum }}</span>


        <p style="color: #ffff;">———————</p>

        &nbsp;<span style="color: #ffff;">拍片类检查数量</span>

      </div>

      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ shootingsum }}</span>



        <p style="color: #ffff;">———————</p>

        &nbsp;<span style="color: #ffff;">拍片类检查费用</span>

      </div>

      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ testnum }}</span>



        <p style="color: #ffff;">———————</p>

        &nbsp;<span style="color: #ffff;">化验类检查数量</span>

      </div>
      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ testsum }}</span>



        <p style="color: #ffff;">———————</p>

        &nbsp;<span style="color: #ffff;">化验类检查费用</span>

      </div>

      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ allnum }}</span>


        <p style="color: #ffff;">—————</p>

        &nbsp;<span style="color: #ffff;">总检查数量</span>

      </div>
      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ allsum }}</span>

        <p style="color: #ffff;">—————</p>

        &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffff;">总费用</span>

      </div>


    </div>

    <div style="height: 40px; color: #ffff; "></div>

    <el-tabs type="border-card" @tab-click="query">
      <el-tab-pane label="全部"></el-tab-pane>
      <el-tab-pane label="拍片类"></el-tab-pane>
      <el-tab-pane label="化验类"></el-tab-pane>
      <el-table :data="tableData" style="width: 100% ; ">
        <el-table-column prop="dzmHisInspectionfee.insId" label="序号">
        </el-table-column>
        <el-table-column prop="goodsName" label="项目名称">
        </el-table-column>
        <el-table-column prop="num" label="项目数量">
        </el-table-column>
        <el-table-column prop="amount" label="项目金额">
        </el-table-column>
      </el-table>
    </el-tabs>

  </div>
</template>
  
<script>

import { xray } from '../../api/incomeAndExpenses/CheckItemRequest'

import { query } from '../../api/incomeAndExpenses/CheckItemRequest'

export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //拍片数量
      shootingnum: 0,
      //拍片总价
      shootingsum: 0,
      //化验数量
      testnum: 0,
      //化验总价
      testsum: 0,
      //总数量
      allnum: 0,
      //总价
      allsum: 0,


    }
  },
  methods: {

    query(tab) {

      let typename = tab._props.label

      console.log(tab._props.label)

      if (typename == "全部") {


        xray().then(rep => {

          this.tableData = rep.data


        })

      } else {

        query(typename).then(rep => {

          this.tableData = rep.data


        })
      }

    }



  },
  mounted() {

    xray().then(rep => {

      this.tableData = rep.data





      rep.data.forEach(element => {

        this.allnum = this.allnum + element.num

        this.allsum = this.allsum + element.amount


        if (element.dzmHisInspectionfee.clas == "拍片类") {

          this.shootingnum = this.shootingnum + element.num

          this.shootingsum = this.shootingsum + element.amount


        } else if (element.dzmHisInspectionfee.clas == "化验类") {


          this.testnum = this.testnum + element.num

          this.testsum = this.testsum + element.amount


        }




      });

      console.log(rep.data)


    })

  },

}
</script>

